<template>
  <div class="runsetbox">
    <HeadTop title="跑步设置" />
    <div class="runset">
      <div class="video">
        <span>语音播报</span>
        <span class="icon iconfont" @click="tabicon">
          <span v-if="flag" class="open">&#xe6db;</span>
          <span v-else class="close">&#xe6da;</span>
        </span>
        <hr />
        <p>语言包</p>
      </div>
      <div class="stop">
        <span>自动暂停</span>
        <span class="icon iconfont" @click="stopIcon">
           <span v-if="flagStop" class="open">&#xe6db;</span>
          <span v-else class="close">&#xe6da;</span>
        </span>
      </div>
      <div class="light">
        <span>屏幕常亮</span>
        <span class="icon iconfont" @click="lightIcon">
          <span v-if="flaglight" class="open">&#xe6db;</span>
          <span v-else class="close">&#xe6da;</span>
        </span>
      </div>
      <div class="line">
        <span class="jilu" @click="toRunjilu">我的跑步记录</span>
        <hr />
        <span>发现路线</span>
        <hr />
        <span>自动匹配路线</span>
        <span class="icon iconfont" @click="lineIcon">
           <span v-if="flagLine" class="open">&#xe6db;</span>
          <span v-else class="close">&#xe6da;</span>
        </span>
      </div>
      <div class="show">
        <span>锁屏显示运动数据</span>
        <span class="icon iconfont" @click="showIcon">
          <span v-if="flagShow" class="open">&#xe6db;</span>
          <span v-else class="close">&#xe6da;</span>
        </span>
      </div>
      <div class="map">
        <span>离线地图</span>
      </div>
      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
import HeadTop from "../../../components/Nav/HeadTop";
export default {
  components: {
    HeadTop
  },
  data() {
    return {
      flag: false,
      flagStop: false,
      flaglight: false,
      flagLine: false,
      flagShow: false
    };
  },
  methods: {
    tabicon() {
      this.flag = !this.flag;
      localStorage.setItem("flag", this.flag);
    },
    stopIcon() {
      this.flagStop = !this.flagStop;
      localStorage.setItem("flagStop", this.flagStop);
    },
    lightIcon() {
      this.flaglight = !this.flaglight;
      localStorage.setItem("flaglight", this.flaglight);
    },
    lineIcon() {
      this.flagLine = !this.flagLine;
      localStorage.setItem("flagLine", this.flagLine);
    },
    showIcon() {
      this.flagShow = !this.flagShow;
      localStorage.setItem("flagShow", this.flagShow);
    },
    toRunjilu() {
      this.$router.push("/runjilu");
    }
  },
  mounted() {
    // console.log(localStorage.getItem('flag'));  
    if(localStorage.getItem('flag')=='true'){
      this.flag = true;
    }else{
      this.flag = false;
    }
     if(localStorage.getItem('flagStop')=='true'){
      this.flagStop = true;
    }else{
      this.flagStop = false;
    }
     
     if(localStorage.getItem('flaglight') == 'true'){
       this.flaglight = true;
    }else{
      this.flaglight = false;
    }
     if(localStorage.getItem('flagLine') == 'true'){
       this.flagLine = true;
    }else{
      this.flagLine = false;
    }
     if(localStorage.getItem('flagShow') == 'true'){
       this.flagShow = true;
    }else{
      this.flagShow = false;
    }
  },
};
</script>

<style lang="less" scoped>
.runsetbox {
  background: #fff;
  .runset {
    background: #eee;
    .video {
      height: 1.8rem;
      background: #fff;
      margin-top: 0.2rem;
      span {
        height: 0.7rem;
        line-height: 0.7rem;
        margin-left: 0.1rem;
      }
      .icon {
        font-size: 0.8rem;
        float: right;
        margin-right: 0.4rem;
        .close {
          color: gray;
        }
        .open {
          color: rgb(254, 217, 6);
        }
      }
      p {
        height: 0.6rem;
        line-height: 0.3rem;
        margin-left: 0.1rem;
      }
    }
    .stop {
      background: #fff;
      margin-top: 0.2rem;
      height: 1rem;
      span {
        height: 1rem;
        line-height: 1rem;
        margin-left: 0.1rem;
      }

      .icon {
        font-size: 0.8rem;
        float: right;
        margin-right: 0.4rem;
        .close {
          color: gray;
        }
        .open {
          color: rgb(254, 217, 6);
        }
      }
    }
    .light {
      background: #fff;
      margin-top: 0.2rem;
      height: 1rem;
      span {
        height: 1.1rem;
        line-height: 1.1rem;
        margin-left: 0.1rem;
      }
      .icon {
        font-size: 0.8rem;
        float: right;
        margin-right: 0.4rem;
        .close {
          color: gray;
        }
        .open {
          color: rgb(254, 217, 6);
        }
      }
    }
    .line {
      height: 3.1rem;
      background: #fff;
      margin-top: 0.2rem;
      span {
        height: 0.7rem;
        line-height: 0.7rem;
        margin-left: 0.16rem;
      }

      .icon {
        font-size: 0.8rem;
        float: right;
        margin-right: 0.4rem;
        .close {
          color: gray;
        }
        .open {
          color: rgb(254, 217, 6);
        }
      }
    }
    .show {
      background: #fff;
      margin-top: 0.2rem;
      height: 1rem;
      span {
        height: 1rem;
        line-height: 1rem;
        margin-left: 0.1rem;
      }

      .icon {
        font-size: 0.8rem;
        float: right;
        margin-right: 0.4rem;
        .close {
          color: gray;
        }
        .open {
          color: rgb(254, 217, 6);
        }
      }
    }
    .map {
      background: #fff;
      margin-top: 0.2rem;
      height: 1rem;
      span {
        height: 1.1rem;
        line-height: 1rem;
        margin-left: 0.1rem;
      }
    }
    .kong {
      height: 2.25rem;
      background: #eee;
    }
  }
}
</style>